<template>
  <div class="task-item-wan">
    <div class="wrapper" ref="orderWrapper">
      <ul class="task-ul">
        <li v-for="(item,index) in itemarr">
          <div class="li-top" @click="detail(itemarr[index].system_order_no)">
            <h1>订单号：{{itemarr[index].system_order_no}}</h1>
            <span>更多</span>
          </div>
          <div class="li-center">
            <div class="address">
              <span>取</span>
              <p>{{itemarr[index].shop_info.address}}</a></p>
            </div>
            <div class="address">
              <span class="green">送</span>
              <p>{{itemarr[index].receiver_address}}</p>
            </div>
          </div>
          
        </li>
      </ul>
      <div class="loading-wrapper" >
          <p v-show="nomore">没有更多啦</p>
      </div>
    </div>
    <h1 class="no-data" v-if="nodata">没有数据</h1>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  
  data() {
    return {
      itemarr:[],
      loadmore : false,
      nomore : false,
      currentPage : 1,
      pagesize : 5,
      maxpage:0,
      pullup: true,
      urls : '',
      scrollY : 0,
      refreshDelay: 20,
      orderState : '',
      nodata : false
    }
  },
  mounted() {
      this.initData();
      this.urls = HOST;
  },
  methods:{
    detail(id){
     // this.$router.push('/taskdetail3/'+id)
    },
    call(phone){
      console.log(phone)
      window.location.href = 'tel:' + phone
    },
    initData(){
      let token = localStorage.getItem("access_token");
      let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize,"status":"DELIVER_FINISHED"}
      this.ajaxplugin("/Deliver/task_list",params,(res) => {
        this.itemarr = []
        console.log(res)
        if(res.result == "success"){
          this.maxpage = res.data.total_page
          let arr = res.data.order_list
          this.loadmore = false;
          if(arr!=''){
            this.nodata = false
            this.itemarr = arr
            this.$nextTick(() => {
              //dom更新了 可以调用better-scroll了
              this.initScroll();
            })
            this.currentPage = this.currentPage+1;
          }else{
            this.itemarr = ''
            this.nodata = true
          }
        }
      })
    },
    initScroll(){
      if(this.orderScroll){
        this.orderScroll.refresh();
        console.log('has scroll')
      }else{
        this.orderScroll = new BScroll(this.$refs.orderWrapper,{
          probeType:1,
          click:true
        });
      }
      this.orderScroll.on('scroll',(pos)=>{
        this.scrollY = Math.abs(Math.round(pos.y));
        //console.log("====scrollY" + this.scrollY)
      });
      this.orderScroll.on('touchend', (pos) => {
        // 下拉动作
        if (pos.y > 50) {
          //console.log('xiala')
        }
      });
      this.orderScroll.on('scrollEnd', () => {
        // 滚动到底部
        if (this.orderScroll.y <= (this.orderScroll.maxScrollY + 50)) {
          this.loadData();
          console.log('jjj')
        }
      })
    },
    loadData(){
      if(this.currentPage<=this.maxpage){
        this.loadmore = true;
        this.nomore = false;
        let token = localStorage.getItem("access_token");
        let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize,"status":"DELIVER_FINISHED"}
        this.ajaxplugin("/Deliver/task_list",params,(res) => {
          if(res.result == "success"){
            let arr = res.data.order_list
            this.loadmore = false;
            if(this.itemarr == ''){
              this.itemarr = arr ; 
            }else{
              for(let item of arr){
                this.itemarr.push(item)
              }
            }
            // this.$nextTick(() => {
            //   //dom更新了 可以调用better-scroll了
            //   this.initScroll();
            // })
            this.currentPage = this.currentPage+1;
          }
        })
      }else{
        setTimeout(() => {
          this.loadmore = false;
          this.nomore = true;
          setTimeout(() => {
            this.nomore = false;
          }, 1000)
        }, 1500)
      }
    },
    refresh() {
      // 代理better-scroll的refresh方法
      this.orderScroll && this.orderScroll.refresh()
    }
  },
  components:{
  },
  watch: {
    // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
    itemarr() {
      setTimeout(() => {
        this.refresh()
      }, this.refreshDelay)
    }
  }
}
</script>

<style lang="stylus">
.task-item-wan
  color:#666
  font-size:15px
  position:relative
  width:100%
  .no-data
    position: absolute
    top: 100px
    left: 40%
    font-size: 14px
    width: 20%
    text-align: center
    color: #108ee9
  .icon-img
    width:30px
    height:30px
  .wrapper
    height:80%
    width:100%
    position:fixed
    top:88px
    left:0
    .loading-wrapper
      text-align:center
      height:24px
      width:100%
      position:absolute
      left:0
      bottom:-24px
      p
        width:100%
        line-height:24px
        font-size:14px
        color:#686868
    .task-ul
      position:absolute
      top:0
      left:0
      width:100%
      li
        margin-bottom:10px
        background:white
        .li-top
          display:flex
          border-bottom:1px solid #eee
          padding:10px 20px
          h1
            flex:1
            font-size:18px
            padding-top:5px
            span
              font-size:10px
              padding:2px
              background:#ffc107
              color:#fff
              margin-left:5px
              border-radius:5px
          span
            color: #4ca64c
            border: 1px solid #4ca64c
            margin-top: 5px
            padding: 2px
        .li-center
          padding:10px 20px
          .address
            display:flex
            margin-bottom:10px
            p
              font-size:14px
              color:#333
              line-height: 20px
            span
              color: #26a2ff
              border: 1px solid #26a2ff
              border-radius: 50%
              padding: 3px
              margin-right: 10px
              &.green
                color:green
                border: 1px solid green
          .laber
            padding:5px
            span
              color: #ffc107
              border: 1px solid #ffc107
              border-radius: 5px
              padding: 3px
              margin-right: 10px
          .g-btn
            clear:both
            margin-top:15px
            display:flex
            .btn-ju,.btn-jie
              height:35px
            .btn-ju
              flex:0 0 30%
            .btn-jie
              margin-left:10px
              flex:1
    
</style>